<template>
  <div>
    <div class="layout" :style="{ 'padding-top': `${height}px` }">123</div>
    <div class="home" :style="{ 'padding-top': `${height + 44}px` }">
      <div @click.stop="bianshe">变色</div>
      <div class="div">123</div>
      <img alt="Vue logo" src="../assets/logo.png" @click="debouncedClick" />
      <div>{{ $t("app.a") }}</div>
      <HelloWorld msg="Welcome to Your Vue.js App" />
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["height"]),
  },
  created() {
    // 用 Lodash 的防抖函数
    this.debouncedClick = _.debounce(this.click, 500);
  },
  unmounted() {
    // 移除组件时，取消定时器
    this.debouncedClick.cancel();
  },
  methods: {
    click() {
      if (this.$i18n.locale == "zh") {
        this.$i18n.locale = "en";
      } else {
        this.$i18n.locale = "zh";
      }
      console.log(1);
    },
    bianshe() {
      document.documentElement.setAttribute("data-theme", "blue");
    },
  },
};
</script>

<style lang="less" scoped>
.layout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: red;
  z-index: 10;
}

.home {
  position: relative;
  overflow: hidden;
}

.div {
  .size(100px, 100px);
  .font_color(white);
  .bg_color(red);
}
</style>
